<template>
	<view class="container">
		<view class="tops">
			<view class="online-class">我的课程</view>
		</view>
		<scroll-view scroll-y class="experience-class">
			<view class="lives" @click="toLives">点击这里，查看你的直播课程>></view>
			<view class="experience-view"  v-if="classList">
				<view class="experience-list" v-for="item in classList" @click="todetail(item)">
					<view class="exp-title">
						<view class="free-icon" v-if="item.tip">
							<text>{{item.tip}}</text>
						</view>
						<view class="titles">{{item.title}}</view>
					</view>
					<view class="desc">随时可看 {{item.pay_time}}</view>
					<!-- <view class="desc">随时可看 {{item.pay_time}} | 上课周期：{{item.week}} 课时</view> -->
					<view class="teachers">
						<view class="teacher-img"> </view>
						<view class="class-btns">立即学习</view>
					</view>
				</view>
			</view>
			<view class="nodata" v-else> 暂无课程数据 </view>
		</scroll-view>
	</view>
	
	<!--自定义TabBar-->
	<uv-tabbar :value="value" :fixed="true" @change="index=>value = index" activeColor="#F56822">
		<view class="tabbars">
			<uv-tabbar-item text="在线好课" @click="tabbarClick(1)">
				<template v-slot:active-icon>
					<image class="icon" src="/static/tabbar/index-check.png"></image>
				</template>
				<template v-slot:inactive-icon>
					<image class="icon" src="/static/tabbar/index.png"></image>
				</template>
			</uv-tabbar-item>
			<uv-tabbar-item text="我的课程" @click="tabbarClick(2)">
				<template v-slot:active-icon>
					<image class="icon" src="/static/tabbar/class-check.png"></image>
				</template>
				<template v-slot:inactive-icon>
					<image class="icon" src="/static/tabbar/class.png"></image>
				</template>
			</uv-tabbar-item>
			<uv-tabbar-item text="汉语动态" @click="tabbarClick(3)">
				<template v-slot:active-icon>
					<image class="icon" src="/static/tabbar/chinese-check.png"></image>
				</template>
				<template v-slot:inactive-icon>
					<image class="icon" src="/static/tabbar/chinese.png"></image>
				</template>
			</uv-tabbar-item>
			<uv-tabbar-item text="个人中心" @click="tabbarClick(4)">
				<template v-slot:active-icon>
					<image class="icon" src="/static/tabbar/user-check.png"></image>
				</template>
				<template v-slot:inactive-icon>
					<image class="icon" src="/static/tabbar/user.png"></image>
				</template>
			</uv-tabbar-item>
		</view>
	</uv-tabbar>
</template>

<script>
	export default {
		data() {
			return {
				baseURL: getApp().globalData.baseUrl,
				classList: [],
				value: 1
			}
		},
		onShow(){
			this.getClassList()
		},
		methods: {
			toLives(){
				var isLogin = uni.getStorageSync('isLogin')
				if( isLogin ){
					uni.navigateTo({url : '/pages/class/lives'})
				} else {
					uni.showToast({ title: '请登录！', icon: 'none' });
					setTimeout(function(){
						uni.navigateTo({url : '/pages/login/index'})
					},500)
				}
			},
			getClassList(){
				var appid = uni.getStorageSync('appid')
				uni.request({
					url: this.baseURL + '/api/user/course',
					method: 'GET',
					data: {appid: appid},
					header: { 'Content-Type': 'application/json' },
					success: (res) => {
						if( res.data.status == 1001 ){
							uni.showToast({ title: '账户信息已过期，请重新登录！', icon: 'none' });
							uni.setStorageSync('isLogin',false)
							uni.setStorageSync('phone','')
							uni.setStorageSync('appid','')
							setTimeout(function(){
								uni.navigateTo({url: '/pages/login/index'})
							},1000)
						}
						this.classList = res.data.data.lists
					},
					fail: (err) => {
						console.error('请求失败:', err);
					}
				})
			},
			todetail(item){
				uni.navigateTo({url : '/pages/class/details?id='+item.cid})
			},
			tabbarClick(item){
				if( item == 1 ){
					uni.reLaunch({url: '/pages/index/index'})
				} else if( item == 2 ){
					uni.reLaunch({url: '/pages/class/class'})
				} else if( item == 3 ){
					uni.reLaunch({url: '/pages/dynamics/dynamics'})
				} else if( item == 4 ){
					uni.reLaunch({url: '/pages/user/user'})
				}
			}
		}
	}
</script>

<style>
	.container{background: #F8FAFB;height: 100vh;}
	.tops{display: flex;width: 690rpx;margin: 0 auto;justify-content: space-between;flex-direction: row;padding: 10rpx 0 10rpx 0;}
	.tops .online-class{font-size: 42rpx;font-weight: bold;}
	.experience-class{width: 690rpx;margin: 10rpx auto;padding-bottom: 200rpx;}
	.experience-title{width: 690rpx;font-size: 30rpx;font-weight: bold;letter-spacing: 5rpx;}
	.experience-view{width: 690rpx;display: flex;flex-direction: column;}
	.experience-list{width: 90%;background: #fff;border-radius: 10rpx;padding: 20rpx;margin: 20rpx auto;}
	.exp-title{display: flex;flex-direction: row;}
	.experience-list .free-icon{height: 40rpx;background: url(/static/free.png);background-size: 100% 100%;font-size: 26rpx;float: left;padding: 0 15rpx 0 15rpx;}
	.experience-list .free-icon text{display: inline-block;text-align: center;color: #fff;line-height: 40rpx;}
	.titles{padding-left: 10rpx;line-height: 40rpx;font-size: 30rpx;}
	.desc{color: #ADADAD;font-size: 26rpx;margin-top: 10rpx;}
	.teachers{width: 100%;display: flex;flex-direction: row;margin-top: 80rpx;align-items: center;justify-content: space-between;}
	.teacher-img{width: 50%;display: flex;flex-direction: row;justify-content: start;}
	.teachers image{width: 80rpx;height: 80rpx;border-radius: 80rpx;}
	.class-btns{font-size: 24rpx;color: #fff;width: 120rpx;height: 50rpx;text-align: center;background: #EB6E30;border-radius: 50rpx;line-height: 50rpx;}
	.class-infos{display: flex;flex-direction: column;width: 50%;text-align: right;}
	.lives{width: 80%;margin: 50rpx auto;background: #FDF5E8;box-shadow: 0 10rpx 10rpx 0 #d8d8d8;padding: 20rpx 10rpx 20rpx 10rpx;text-align: center;font-size: 28rpx; color: #EB6E30;}
	.nodata{width: 100%;text-align: center;font-size: 26rpx;color: #888;}
	.icon {width: 50rpx;height: 50rpx;}
	.tabbars{ margin-top: 20rpx;display: flex;flex-direction: row;justify-content: space-around;width: 100%;padding-bottom: 20rpx; }
</style>
